<template>
  <Collapse ref="collapse" class="collapse-content after">
    <template v-slot:content>
      <div>
        <yz-condition-filter
          v-model="queryParams"
          @resetSearch="resetSearch"
          @onSubmit="onSubmit"
        >
          <yz-input inputType="date"
                    class="margin-r-20"
                    placeholder="请选择生产日期"
                    title="生产日期"
                    v-model="queryParams.dateRange"/>
          <select-tooltip
            v-model="queryParams.workshop"
            isShowAll
            :multiple="false"
            :options="workshopOpt"
            msg="所在车间"
          ></select-tooltip>
          <select-tooltip
            v-model="queryParams.shift"
            isShowAll
            :multiple="false"
            :options="shiftOptions"
            msg="加工班次"
          ></select-tooltip>
          <select-tooltip
            v-model="queryParams.status"
            isShowAll
            :multiple="false"
            :options="statusOptions"
            msg="状态"
          ></select-tooltip>
          <select-tooltip
            v-model="queryParams.devices"
            isShowAll
            :multiple="true"
            :options="devicesOption"
            msg="加工设备"
          ></select-tooltip>
        </yz-condition-filter>
      </div>
    </template>
  </Collapse>
</template>

<script>
import Collapse from 'components/collapse/index'
import moment from 'moment'
import { getDeviceIds, getWorkshops } from '../../../../boot/job/process-order'
import { getShiftsList } from '../../../../boot/job/man-machine-bind'

export default {
  name: 'ListSearch',
  components: {
    Collapse
  },
  data () {
    return {
      workshopOpt: [],
      shiftOptions: [],
      devicesOption: [],
      statusOptions: [],
      devicesMap: {},
      queryParams: {
        dateRange: null,
        workshop: 'all',
        shift: 'all',
        devices: ['all'],
        status: 'all'
      }
    }
  },
  mounted () {
    this.init()
  },
  watch: {
    'queryParams.workshop': {
      handler (val) {
        if (val) {
          if (val === 'all') {
            this.queryParams.devices = ['all']
            this.queryParams.shift = 'all'
            this.shiftOptions = []
            this.devicesOption = []
          } else {
            this.getDeviceIds()
            this.getShift()
          }
        }
      }
    }
  },
  methods: {
    init () {
      this.getWorkshops()
      const newArr = Object.entries(this.Enums.OVER_PRODUCTION_STATUS)
        .map(entry => {
          return {
            value: entry[1].value,
            label: entry[1].desc
          }
        })
      this.statusOptions.push(...newArr)
    },
    // 获取加工车间
    getWorkshops () {
      getWorkshops().then(res => {
        this.workshopOpt = res.data
      })
    },

    // 获取加工设备
    getDeviceIds () {
      const params = {}
      if (this.queryParams.workshop) {
        params['level'] = 2
        params['schemeId'] = this.queryParams.workshop
      } else {
        params['level'] = 0
      }
      getDeviceIds(params).then(res => {
        this.devicesMap = {}
        let devicesOption = []
        if (res.data.length) {
          res.data.forEach(item => {
            this.devicesMap[item.id] = item.name
            devicesOption.push({
              'label': `${item.name} (${item.assetNumber || ''})`,
              'value': item.id
            })
          })

          this.queryParams.devices = ['all']
        } else {
          this.queryParams.devices = []
        }
        this.devicesOption = devicesOption
      })
    },

    // 获取班次
    getShift () {
      const shiftOptions = []
      if (this.queryParams.workshop) {
        const params = {
          id: this.queryParams.workshop
        }
        getShiftsList(params).then(res => {
          res.data.forEach(item => {
            shiftOptions.push({
              'label': item.name,
              'value': item.id
            })
          })
        })
      }
      this.queryParams.shift = 'all'
      this.shiftOptions = shiftOptions
    },

    // 重置
    resetSearch () {
      Object.assign(this.queryParams, this.$options.data().queryParams)
      this.$emit('clear')
    },

    onSubmit () {
      if (this.queryParams.dateRange && Math.abs(moment(this.queryParams.dateRange[0]).diff(moment(this.queryParams.dateRange[1]), 'days')) > 60) {
        this.$message.warning('日期范围不可超过60天')
        return
      }
      this.$emit('onSubmit', this.queryParams)
    }
  }
}
</script>

<style scoped>

</style>
